<script setup lang="ts">
import dayjs from "dayjs";
// import MdEditor from "md-editor-v3";
import IncomeBar from "./components/IncomeBar.vue";
import ConsumeBar from "./components/ConsumeBar.vue";
import IncomePie from "./components/IncomePie.vue";
import ConsumePie from "./components/ConsumePie.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
// import Line from "./components/Line.vue";
import { getReleases } from "@/api/list";
import TypeIt from "@/components/ReTypeit";
// import { useWindowSize } from "@vueuse/core";
import { reactive, ref, computed, markRaw } from "vue";
// import Github from "./components/Github.vue";
import { randomColor } from "@pureadmin/utils";
import { useRenderFlicker } from "@/components/ReFlicker";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";

defineOptions({
  name: "Dashboard"
});
const form = reactive({
  st_day: "2023",
  user_id: 0,
  category_id: 0
});
const formRef = ref();
const list = ref();
const loading = ref<boolean>(true);
// const { version } = __APP_INFO__.pkg;
const titleClass = computed(() => {
  return ["text-base", "font-medium"];
});

// const { height } = useWindowSize();

setTimeout(() => {
  loading.value = !loading.value;
}, 800);

getReleases().then(({ data }) => {
  list.value = data.list.map(v => {
    return {
      content: v.body,
      timestamp: dayjs(v.published_at).format("YYYY/MM/DD hh:mm:ss A"),
      icon: markRaw(
        useRenderFlicker({
          background: randomColor({ type: "hex" }) as string
        })
      )
    };
  });
});

async function onSearch() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
}

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};
</script>

<template>
  <div>
    <el-row :gutter="24">
      <el-col
        v-motion
        :xs="48"
        :sm="48"
        :md="24"
        :lg="24"
        :xl="24"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200
          }
        }"
      >
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
        >
          <el-form-item label="时间：" prop="st_day">
            <el-select
              v-model="form.st_day"
              placeholder="请选择时间维度："
              clearable
              class="!w-[180px]"
            >
              <el-option label="2023年度" value="2023" />
              <el-option label="2023年1月" value="202301" />
              <el-option label="2023年2月" value="202302" />
              <el-option label="2023年3月" value="202303" />
            </el-select>
          </el-form-item>
          <el-form-item label="分类名称：" prop="category_id">
            <el-select
              v-model="form.category_id"
              placeholder="请选择分类名称："
              clearable
            >
              <el-option label="支出" value="1" />
              <el-option label="收入" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon(Search)"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never">
          <template #header>
            <a
              :class="titleClass"
              href="https://github.com/pure-admin/vue-pure-admin"
              target="_black"
            >
              <TypeIt
                :className="'type-it2'"
                :values="['收入分类饼图']"
                :cursor="false"
                :speed="120"
              />
            </a>
          </template>
          <el-skeleton animated :rows="12" :loading="loading">
            <template #default>
              <IncomePie />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never">
          <template #header>
            <a
              :class="titleClass"
              href="https://github.com/pure-admin/vue-pure-admin"
              target="_black"
            >
              <TypeIt
                :className="'type-it1'"
                :values="['支出分类饼图']"
                :cursor="false"
                :speed="120"
              />
            </a>
          </template>
          <el-skeleton animated :rows="12" :loading="loading">
            <template #default>
              <ConsumePie />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col
        v-motion
        :xs="48"
        :sm="48"
        :md="24"
        :lg="24"
        :xl="24"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200
          }
        }"
      >
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
        >
          <el-form-item label="年度：" prop="st_day">
            <el-select
              v-model="form.st_day"
              placeholder="请选择年度："
              clearable
              class="!w-[180px]"
            >
              <el-option label="2023年度" value="2023" />
              <el-option label="2022年度" value="2022" />
              <el-option label="2021年度" value="2021" />
            </el-select>
          </el-form-item>

          <el-form-item label="账户名称：" prop="user_id">
            <el-select
              v-model="form.user_id"
              placeholder="请选择账户名称："
              clearable
            >
              <el-option label="宋修轩" value="1" />
              <el-option label="石新新" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon('ri:search-line')"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="24"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never">
          <template #header>
            <a
              :class="titleClass"
              href="https://github.com/pure-admin/vue-pure-admin"
              target="_black"
            >
              <TypeIt
                :className="'type-it5'"
                :values="['收入对比柱状图']"
                :cursor="false"
                :speed="120"
              />
            </a>
          </template>
          <el-skeleton animated :rows="12" :loading="loading">
            <template #default>
              <IncomeBar />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="24"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never">
          <template #header>
            <a
              :class="titleClass"
              href="https://github.com/pure-admin/vue-pure-admin"
              target="_black"
            >
              <TypeIt
                :className="'type-it6'"
                :values="['支出对比柱状图']"
                :cursor="false"
                :speed="120"
              />
            </a>
          </template>
          <el-skeleton animated :rows="12" :loading="loading">
            <template #default>
              <ConsumeBar />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-timeline-item) {
  margin: 6px 0 0 6px;
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
